<template>
  <div v-if="iv" class="container">
  <main class="help-container">
    <!-- 活动管理帮助卡片 -->
    <div class="card">
      <div class="card-left">
        <img
          loading="lazy"
          class="help-icon"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/ac91fb941163bdda935fd6cb140c479a86c78e750322e98963fae925a91636ed?placeholderIfAbsent=true&apiKey=0754febaf8c14b8b96ef9d19e3bd6d3a"
          alt="活动管理帮助图标"
        />
        <h4 class="help-title">活动管理帮助</h4>
      </div>
      <div class="card-right">
        <div class="help-text" @click="goToHelpPage(1)">如何新建活动信息</div>
        <div class="help-text" @click="goToHelpPage(2)">如何删除发起的活动</div>
      </div>
    </div>

    <!-- 账号辅助卡片 -->
    <div class="card">
      <div class="card-left">
        <img
          loading="lazy"
          class="help-icon"
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/f13b5873c05e0d415be00de4afb871b3066685965b769d115eeeba243f2b4c9e?placeholderIfAbsent=true&apiKey=0754febaf8c14b8b96ef9d19e3bd6d3a"
          alt="账号辅助图标"
        />
        <h4 class="help-title">账号辅助</h4>
      </div>
      <div class="card-right">
        <div class="help-text" @click="goToHelpPage(3)">如何登陆新账号</div>
        <div class="help-text" @click="goToHelpPage(4)">如何换绑新电话</div>
        <div class="help-text" @click="goToHelpPage(5)">如何修改头像等信息</div>
      </div>
    </div>
  </main>
  </div>
</template>
<script>
	import { PinlistAPI,UserAPI ,getUserInfo,OrderAPI} from '../../services/api'; // 引入 PinlistAPI
	export default {
		data() {
			return {
				iv: false,
			}
		},
		methods: {
		  async onLoad() {
			// 在组件创建时获取用户信息
			this.iv=await OrderAPI.fetchOrderData();
		  },
			goToHelpPage(helpId) {
				  uni.navigateTo({
					url: `/pages/userBranch/helpDetails?helpId=${helpId}`, // 在 URL 中传递参数 id
				  });
				},
			}
	}
</script>
<style scoped>
/* 整个页面背景颜色 */
body {
  background: #f5f5f5; /* 与卡片容器背景一致 */
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  overflow: hidden; 
}

.help-container {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  padding-top: 0px; /* 增加顶部的留白 */
  background: transparent; /* 背景保持一致 */
}

/* 卡片样式 */
.card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 30px 20px; /* 增加上下左右的内边距 */
  margin: 20px 20px; /* 卡片间距 */
}

.card-left {
  width: 30%;
  text-align: center;
}

.card-right {
  width: 70%;
  padding-left: 15px; /* 卡片内容左右留白 */
}

.help-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 10px;
  display: block;
}

.help-title {
  margin-top: 10px;
  font-size: 16px; /* 调整标题字体大小 */
  color: #333;
}

.help-text {
  color: #666;
  font-size: 14px; /* 调整内容字体大小 */
  line-height: 1.8; /* 增加行间距 */
  margin-bottom: 10px;
}
</style>